<template>
	<view class="details">
		<!-- 详情图 -->
		<view class="detailsImg">
			<u-swiper
			:list="list6"
			@change="e => currentNum = e.current"
			:autoplay="false"
			indicatorStyle="right: 20px"
			        >
			<view
				slot="indicator"
				class="indicator-num"
			>
				<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list6.length }}</text>
			</view>
			</u-swiper>
		</view>
		<!-- 内容 -->
		<view class="content">
			<view class="title">
				<text>{{shopName}}</text>
			</view>
			<!-- 钱数 -->
			<view class="moneyIntroduce">
				<view class="money">
					<text>¥ {{goods_price}}</text>
				</view>
				<!-- <view class="share">
					<image src="../../../../static/img/my/fx.png" mode=""></image>
				</view> -->
				<view class="collection">
					<image v-if="showUpImg" @click="$noMultipleClicks(collectionNetworking)" src="" mode=""></image>
					<image v-if="!showUpImg" @click="$noMultipleClicks(collectionNetworking)" src="" mode=""></image>
				</view>
			</view>
			<!-- 天猫 -->
			<view class="reduction" v-if="editionShow">
				<view class="reductionImg">
					<image src="../../../../static/best.png" mode=""></image>
				</view>
				<text>¥ 9999</text>
				<view class="reductionImg" style="margin-left: 30rpx;">
					<image src="" mode=""></image>
				</view>
				<text>¥ 999</text>
				<view class="reductionImg" style="margin-left: 30rpx;">
					<image src="" mode=""></image>
				</view>
				<text>¥ 9999</text>
			</view>
			<!-- 领取 -->
			<view class="receive" v-if="editionShow">
				<view class="purchase">
					<view style="display: flex;">
						<view style="width: 48rpx;margin: 12rpx 24rpx;">
							<text class="immediately">立即
							购买
							</text>
						</view>
						<view class="toTmall">
							<text>去天猫购买</text>
						</view>
					</view>
				</view>
				<view class="completed">
					<view style="width: 48rpx;margin: 12rpx 24rpx;" class="">
						<text class="immediately">支付
						完成
						</text>
					</view>
				</view>
				<view class="back">
					<text class="fanli">确认收货</text>
					<view class="yuan"></view>
					<view class="line"></view>
					<view class="yuan"></view>
					<view class="completed">
						<view style="width: 48rpx;margin: 12rpx 24rpx;" class="">
							<text class="immediately">确认
							收货
							</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 优惠卷 -->
			<view class="coupon" v-show="monynShow">
				<view class="couponMoney">
					<text>¥ {{amount/100}}</text>
					<text class="couponVip">专享优惠券</text>
				</view>
				<view class="effectiveTime">
					<text>满199可用有效期：</text>
					<text>{{startTime}}-{{endTime}}</text>
				</view>
				<view class="lqButn">
					<u-button :disabled='disabled' class="btn" color="##e97b7b" text="立即领取" @click='receive()'></u-button>
				</view>
			</view>
			<!-- 下单返利 -->
			<view class="rebate" v-if="editionShow">
				<view class="rebateImg">
					<image src="../../../../static/img/xinagqing/fan.png" mode=""></image>
				</view>
				<text>下单后再返约￥{{rebate}}</text>
			</view>
			<!-- 口令复制 -->
			<view class="copy" v-if="editionShow">
				<text>淘口令(长按复制~)</text>
				<view class="copyBtn">
					<view @click="copy(goods_word)" class="copybtn">点击此处复制</view>
				</view>
			</view>
			<!-- 商品详情 -->
			<view class="shopdetails">
				<text>商品详情</text>
				<view class="detailsImg">
					<u-swiper
					:list="list6"
					@change="e => newCurrentNum = e.current"
					:autoplay="false"
					indicatorStyle="right: 20px"
					        >
					<view
						slot="indicator"
						class="indicator-num"
					>
						<text class="indicator-num__text">{{ newCurrentNum + 1 }}/{{ list6.length }}</text>
					</view>
					</u-swiper>
				</view>
			</view>
			<view style="height: 78rpx;"></view>
		</view>
		<!-- 底部天猫购买 -->
		<view class="toTmallpurchase">
			<!-- <button @click="urlTo(goods_url)" class="toTmallbutton" type="default">
				<view class="toImg" style="width: 40rpx;height: 32rpx;"> 
					<image src="" mode=""></image>
				</view>
				淘宝购买
			</button>
			<button @click="urlTo(goods_url)" class="toTmallbutton" type="default">
				<view class="toImg"> 
					<image src="" mode=""></image>
				</view>
				京东购买
			</button> -->
			<button @click="urlTo()" class="toTmallbutton" type="default">
				<view class="toImg"> 
					<image src="" mode=""></image>
				</view>
				拼多多购买
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				disabled: false,
				currentNum: 0,
				newCurrentNum: 0,
				 list6: [],// 轮播图
				 shopName: '',
				 goods_price: '',// 商品价格
				 goods_word: '',// 淘宝口令
				 goods_content: '',// 商品详情,
				 goods_url: '',// 拼多多链接
				 toPdd: '',// 拼多多跳转id
				 toApp: '',// App跳转链接
				 toH5: '', // h5跳转
				 rebate: '', // 用户返利
				 getId: '',
				 noClick: true,// 禁止反复点击
				 userInfo: '', // 用户信息
				 showUpImg: '', // 用户是否收藏
				 shopId: '',// 商品Id
				 xqImg: '', // 详情图片
				 // shouji:'',
				 monynShow: false,// 商品优惠卷
				 startTime: '',// 优惠卷开始时间
				 endTime: '', // 优惠卷结束时间
				 amount: '', // 优惠金额
				 editionShow: true,// 判断版本
			}
		},
		onLoad(options) {
			this.edition();
			this.userInfo = uni.getStorageSync('userInfo'); // 同步获取本地数据
			this.getData(options.id);
		},
		methods: {
			edition() {
				const _this = this;
				uni.request({
					url: this.baseurl+'index.php/api/index/getVersion',
					method:'post',
					data: {
						version: '1.0.0'
					},
					success(res) {
						let editionCode = res.data.data.version;
						if(editionCode == '1') {
							_this.editionShow = true;
						} else {
							_this.editionShow = false;
						}
					}
				})
	
			},
			getData(valId) {
				let idNum = Number(valId);
				uni.showLoading({
				    title: '加载中'  
				});
				uni.request({
					url: this.baseurl+'/index.php/api/index/goods_detail',
					method:'post',
					header:{
						"token": this.userInfo.token,
					},
					data:{
						goods_id: idNum
					},
					success: (res) => {	
						if(res.data.code == "1") {
							if(res.data.data.is_collect == 0) {
								this.showUpImg = true;
							} else {
								this.showUpImg = false;
							}
							let money = res.data.data.discount_data.coupon_discount;
							if(!money == 0) {
								this.monynShow = true;
							}
							this.shopId = res.data.data.id;
							this.list6 = res.data.data.goods_banner_images;
							this.shopName = res.data.data.goods_name;
							this.goods_price = res.data.data.goods_price
							this.goods_word = res.data.data.goods_word;
							this.goods_content = res.data.data.goods_content;
							this.goods_url = res.data.data.goods_weapp_url;
							this.toPdd = res.data.data.app_id;
							this.toApp = res.data.data.schema_url;
							this.toH5 = res.data.data.goods_mobile_url;
							this.xqImg = res.data.data.goods_image;
							this.startTime = res.data.data.discount_data.coupon_start_time;
							this.endTime = res.data.data.discount_data.coupon_end_time;
							this.amount = res.data.data.discount_data.coupon_discount;
							this.rebate = res.data.data.goods_commission;
						}
						uni.hideLoading();
					}
				})
			},
			copy(value){
			  //提示模板
			  if(value) {
				  uni.setClipboardData({
					data:value,//要被复制的内容
					success:()=>{//复制成功的回调函数
					  uni.showToast({//提示
						title:'复制成功',
						mask:true,
						position:"center",
						duration: 1000
					  })
					}
				  });
			  } else {
				  uni.showToast({//提示
					title:'暂无商品链接',
					mask:true,
					position:"center",	
					duration: 1000
				  })
			  }
			},
			receive() {
				this.urlTo();
			},
			urlTo() {
				if(this.userInfo.token) {
				// #ifdef APP-PLUS
					plus.runtime.openURL(this.toApp, function(res) {
						uni.showModal({  
						content:"本机未检测到品拼多多客户端，是否打开浏览器访问拼多多？",  
						success:function(res){  
								if (res.confirm) { 
									plus.runtime.openURL(this.toApp)  
								}  
							}  
						})  
					});
				// #endif
				// #ifdef H5
					window.location.href= this.toH5;
				// #endif
				// #ifdef MP-WEIXIN
					uni.navigateToMiniProgram({
						appId: this.toPdd,
						path: this.goods_url,
						success: res => {
						  // 打开成功
						  console.log("打开成功", res);
						},
						fail: err => {
						  console.log(err);
						}
					  });
				// #endif
				} else {
					uni.showModal({
					    title: '温馨提示',
					    content: '请先登录',
					    success: function (res) {
					        if (res.confirm) {
								uni.reLaunch({
									url: '../../login/login'
								})
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
				}
			},
			collectionNetworking(){
				if(!this.userInfo.token) {
					console.log(11)
					uni.showModal({
					    title: '温馨提示',
					    content: '请先登录',
					    success: function (res) {
					        if (res.confirm) {
								uni.reLaunch({
									url: '../../login/login'
								})
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});	
				} else {
					this.showUpImg = !this.showUpImg
					if(this.showUpImg == true) {
						uni.request({
							url:this.baseurl+"index.php/api/index/userCollect",
							header:{
								"token":this.userInfo.token,
							},
							data:{
								"goods_id": this.shopId,
								"is_collect":"0",
							},
							success:(res)=>{
								if("1"==res.data.code){
									uni.showToast({
									    title: res.data.msg,
										mask:true,
										position:"center",
									    duration: 1000
									});
								} else {
									uni.showToast({
									    title: res.data.msg,
										mask:true,
										position:"center",
									    duration: 1000
									});
								}
							}
						})
					} else {
						uni.request({
							url:this.baseurl+"index.php/api/index/userCollect",
							header:{
								"token":this.userInfo.token,
							},
							data:{
								"goods_id": this.shopId,
								"is_collect":"1",
							},
							success:(res)=>{
								if("1"==res.data.code){
									uni.showToast({
									    title: res.data.msg,
										mask:true,
										position:"center",
									    duration: 2000
									});
								} else {
									uni.showToast({
									    title: res.data.msg,
										mask:true,
										position:"center",
									    duration: 2000
									});
								}
							}
						})
					}
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.immediately,.toTmall text {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 34rpx;
	}
	.details {
		background-color: #F4F4F4;
		.detailsImg {
			width: 100%;
			height: 520rpx;
		}
		.content {
			padding: 0 32rpx;
			.title {
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 44rpx;
				padding: 28rpx 0;
			}
			.moneyIntroduce {
				display: flex;
				position: relative;
				.money {
					font-size: 36rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #F25F5F;
					line-height: 50rpx;
				}
				.share {
					width: 40rpx;
					height: 40rpx;
					padding: 4rpx 0 0 366rpx;
					position: absolute;
					right: 75rpx;
				}
				.collection {
					width: 48rpx;
					height: 44rpx;
					position: absolute;
					right: 0;
				}
				.share image,.collection image {
					width: 100%;
					height: 100%;
				}
			}
			.reduction {
				display: flex;
				padding: 20rpx 0;
				margin-top: 18rpx;
				border-top: 2rpx dashed #979797;
				border-bottom: 2rpx dashed #979797;
				.reductionImg {
					width: 40rpx;
					height: 40rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
				text {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 34rpx;
					padding: 4rpx 0 0 20rpx;
					text-decoration:line-through;
				}
			}
			.receive {
				display: flex;
				padding: 26rpx 0;
				border-bottom: 1px dashed #979797;
				.purchase {
					width: 276rpx;
					height: 116rpx;
					background: url(../../../../static/img/xinagqing/goumai.png) no-repeat;
					background-size: cover;
					.toTmall {
						margin-left: 40rpx;
						text {
							color: #333333;
						}
					}
				}
				.completed {
					width: 96rpx;
					height: 116rpx;
					border-radius: 10rpx;
					background-color: #F25F5F;
					margin-left: 14rpx;
				}
				.back {
					display: flex;
					margin-left: 20rpx;
					position: relative;
					.yuan {
						width: 15rpx;
						height: 15rpx;
						border-radius: 50%;
						border: 2rpx solid #C75050;
						margin-top: 50rpx;
					}
					.yuan:nth-child(3) {
						background-color: #C75050;
					}
					.line {
						width: 134rpx;
						height: 1rpx;
						border: 2rpx dashed #C75050;
						box-sizing: border-box;
						margin-top: 58rpx;
					}
					.fanli {
						position: absolute;
						top: 10rpx;
						left: 40rpx;;
						font-size: 24rpx;
						font-weight: 400;
						color: #333333;
					}
				}
			}
			.coupon {
				width: 100%;
				height: 132rpx;
				background: url(../../../../static/img/xinagqing/coupon.png) no-repeat;
				background-size: cover;
				margin: 32rpx 0 24rpx 0;
				padding-left: 24rpx;
				box-sizing: border-box;
				position: relative;
				.couponMoney {
					font-size: 36rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #FFFFFF;
					line-height: 84rpx;
					.couponVip {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 0rpx;
						margin-left: 14rpx;
					}
				}
				.effectiveTime {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 34rpx;
				}
				.lqButn {
					position: absolute;
					top: 0;
					right: 10rpx;
				}
			}
			.rebate {
				display: flex;
				height: 66rpx;
				background: url(../../../../static/img/xinagqing/bejing.png) no-repeat;
				background-size: cover;
				margin: 24rpx 0 32rpx 0;
				padding: 12rpx 0 0 22rpx;
				box-sizing: border-box;
				.rebateImg {
					width: 40rpx;
					height: 40rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
				text {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #F25F5F;
					line-height: 34rpx;
					margin: 4rpx 0 0 14rpx;
				}
			}
			.copy {
				margin-bottom: 32rpx;
				text {
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 44rpx;
				}
				.copyBtn {
					margin-top: 32rpx;
					.copybtn {
						height: 84rpx;
						line-height: 84rpx;
						text-align: center;
						border-radius: 10rpx;
						color: #FFFFFF;
						background-color: #F25F5F;
					}
				}
			}
			.shopdetails {
				padding-bottom: 78rpx;
				text {
					font-size: 32rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #333333;
					line-height: 44rpx;
				}
				.detailsImg {
					width: 100%;
					height: 474rpx;
					margin-top: 36rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.toTmallpurchase {
			display: flex;
			width: 100%;
			height: 90rpx;
			position: fixed;
			bottom: 0;
			background-color: #F25F5F;
			.toTmallbutton {
				display: flex;
				// width: 216rpx;
				height: 82rpx;
				line-height: 82rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				border-radius: 0;
				background-color: #F25F5F;
				.toImg {
					width: 32rpx;
					height: 32rpx;
					margin: 7rpx 4rpx 0 0;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
	/deep/ .indicator-num {
		color: #FFFFFF !important;
	}
	/deep/ .u-swiper {
		height: 100% !important;
	}
	/deep/ .u-swiper__wrapper {
		height: 100% !important;
	}
	/deep/ .u-swiper__wrapper__item__wrapper {
		height: 100% !important;
	}
	/deep/ .u-swiper__wrapper__item__wrapper__image {
		height: 100% !important;
	}
	/deep/ .uni-btn-icon {
		color: #FFFFFF !important;
	}
	/deep/ .u-button--square {
		border: 0 !important;
		height: 132rpx !important;
		background-color: transparent !important;
	}
	/deep/ .u-swiper__wrapper__item__wrapper__image>div {
		background-position: inherit !important;
	}
</style>
